{% extends '::base.html.twig' %}

{% block stylesheets %}
	<link href="{{ asset('styles/ayudaPrincipal.css') }}" rel="stylesheet" type="text/css" />
	<link href="{{ asset('jqwidgets/styles/jqx.base.css') }}" rel="stylesheet" type="text/css" />
{% endblock %}

{% block javascripts %}
	
{% endblock %}

{% block head %}
<script type="text/javascript" src="{{ asset('scripts/jquery-1.10.2.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('jqwidgets/jqxcore.js') }}"></script>
<script type="text/javascript" src="{{ asset('jqwidgets/jqxdata.js') }}"></script>
<script type="text/javascript" src="{{ asset('jqwidgets/jqxbuttons.js') }}"></script>
<script type="text/javascript" src="{{ asset('jqwidgets/jqxsplitter.js') }}"></script>
<script type="text/javascript" src="{{ asset('jqwidgets/jqxscrollbar.js') }}"></script>
<script type="text/javascript" src="{{ asset('jqwidgets/jqxpanel.js') }}"></script>
<script type="text/javascript" src="{{ asset('jqwidgets/jqxtree.js') }}"></script>
<script type="text/javascript" src="{{ asset('jqwidgets/jqxinput.js') }}"></script>

<script type="text/javascript">
	$(document).ready(function () {
		if($('#mainSplitter')){
			$('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', splitBarSize: 0, resizable: false, panels: [{ size: 32 }] });
			$('#contentSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '18%' }] });
			$('#contentLateral').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '75%', collapsible: false }] });
			$('#contentLateral').jqxSplitter('collapse');
	
			//Tree lateral
			$.getJSON( "json/menu", function( data ) {
				
	            var source =
	            {
	                datatype: "json",
	                datafields: [
	                    { name: 'id' },
	                    { name: 'padre' },
	                    { name: 'parentid' },
	                    { name: 'text' },
	                    { name: 'value' }
	                ],
	                id: 'padre',
	                localdata: data
	            };
	
	            var dataAdapter = new $.jqx.dataAdapter(source);
	            dataAdapter.dataBind();
	            var records = dataAdapter.getRecordsHierarchy('padre', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
	            $('#jqxTree').jqxTree({ source: records, width: '100%'});
			});
			$('#jqxTree').on('select', function (event) {
	            var args = event.args;
	            var item = $('#jqxTree').jqxTree('getItem', args.element);
	            $.ajax({
	           		url: "json/ayuda/"+item.id,
	            	cache: false
	            })
	            .done(function( html ) {
	                if(html != '') $( "#results" ).html( html );
	            });
	        });
		}
		//Inputs
		$("#jqxSubmitButton").jqxButton({ width: '70', height: 23});
		$("#jqxSubmitButton").click(function(){
            $('#contentLateral').jqxSplitter('expand');
            
			texto = $("#jqxInput").val();
			$.ajax({
           		url: "json/buscador/"+texto,
            	cache: false
            })
            .done(function( html ) {
                if(html != '') $( "#ayuda" ).html( html );
            });
		});
		
		$("#jqxInput").jqxInput( { placeHolder: "Texto a buscar", height: 22, width: 250, minLength: 1 });

	});
</script>
{% endblock %}

{% block body %}
<div id='mainSplitter'>
	<div id="contentSup">
    	<div class="floatLeft">
	    	<a href="http://www.pragma.es" class="floatLeft">Home</a>
	        <div class="menuSupSeparator floatLeft"></div>
	        <a href="http://www.pragma.es/videos" class="floatLeft">Videos</a>
	        <div class="menuSupSeparator floatLeft"></div>
	        <a href="http://www.pragma.es/noticias" class="floatLeft">Blog</a>
	        <div class="menuSupSeparator floatLeft"></div>
	        <a href="http://www.pragma.es/noticias" class="floatLeft">Acceso usuarios</a>
        </div>
        <div id="buscardor" class="floatRight">
        	<input type="text" id="jqxInput"/>
        	<input type="submit" value="Buscar" id='jqxSubmitButton' />
        </div>
    </div>
    <div>
        <div id="contentSplitter">
        	<div>
            	<div id='jqxTree'></div>
            </div>
            <div>
            	<div id="contentLateral">
		        	<div id="results"></div>
			        <div id="ayuda"></div>
		        </div>
	        </div>
        </div>
    </div>
</div>
{% endblock %}
